<template>
  <div class="app-container">
    <el-col v-for="item in teamData" :key="item.teamId" :lg="6" :sm="12">
      <box-card
        :key="item.teamId"
        :team-id="item.teamId"
        :privilege="item.privilege"
        :src="item.src"
        :description="item.description"
        :nick="item.nick"
        :title="item.title"
        style="margin: 0 13px 20px 13px"
      />
    </el-col>
    <el-col :col="24">
      <el-card style="margin: 0 13px">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[8, 16, 32]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-col>
  </div>
</template>

<script>
import BoxCard from '@/views/record/components/BoxCard'
import { listTeam } from '@/api/team'
export default {
  components: { BoxCard },
  data() {
    return {
      currentPage: 1,
      pageSize: 8,
      totalNum: 0,
      teamData: [{
        teamId: 0,
        src: 'https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png',
        title: 'test1',
        description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry',
        nick: '未命名'
      }]
    }
  },
  created() {
    this.recordList()
  },
  methods: {
    recordList() {
      listTeam({ current: this.currentPage, size: this.pageSize }).then(res => {
        this.totalNum = Number(res.data.total)
        this.teamData = res.data.records
      })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.recordList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.recordList()
    }
  }
}
</script>

<style scoped>

</style>
